<template>
	<view class="root">
		<view :style="{
		position: 'absolute',
		left: '0',
		right: '0',
		top: '0',
		bottom: '50px',
		}">
			<component v-for="(item,index) in pages"
			           :key="index"
			           :is="item.component"
			           :ref="item.ref"
			           v-if="item.add"
			           v-show="item.show"
			/>
		</view>
		<view :style="{
		position: 'absolute',
		left: '0',
		right: '0',
		bottom: '0',
		height: '50px',
		display: 'flex',
		flexDirection: 'row',
		borderTop: '1px solid #fff',
		}">
			<TabButton
					v-for="(item,index) in tabBtns"
					:key="index"
					:tag="item.tag"
					:text="item.text"
					:checkedColor="item.checkedColor"
					:normalColor="item.normalColor"
					:checked="item.checked"
					@click.native="tabBtnClick(index)"
					ref="tabBtns"
			/>
		</view>
	</view>
</template>

<script>
    import Home from "./home";
    import Xiangqin from "./xiangqin";
    import Dynamic from "./dynamic";
    import Message from "./message";
    import Me from "./me";
    import TabButton from "/src/components/main/tab-button";

    export default {
        name: "main",
        components: {Home, Xiangqin, Dynamic, Message, Me, TabButton},
        data() {
            const curIndex = 0
            const pages = [
                {
                    component: Home,
                    ref: 'home'
                },
                {
                    component: Xiangqin,
                    ref: 'xiangqin'
                },
                {
                    component: Dynamic,
                    ref: 'dynamic'
                },
                {
                    component: Message,
                    ref: 'message'
                },
                {
                    component: Me,
                    ref: 'me'
                }
            ]
            const tabBtns = [
                {
                    tag: "home",
                    text: "首页",
                },
                {
                    tag: "xq",
                    text: "相亲",
                },
                {
                    tag: "dynamic",
                    text: "动态",
                },
                {
                    tag: "msg",
                    text: "消息",
                },
                {
                    tag: "me",
                    text: "我的",
                }
            ]
            for (let i = 0; i < 4; i++) {
                pages[i].show = true
                pages[i].add = curIndex === i
                tabBtns[i].checked = curIndex === i
            }
            return {
                curIndex,
                pages,
                tabBtns
            }
        },
        methods: {
            tabBtnClick(position) {
                if (this.curIndex === position) {
                    return
                }
                this.curIndex = position
                this.$refs.tabBtns.forEach((item, index) => {
                    item.setChecked(index === position)
                })
                this.pages.forEach((item, i) => {
                    item.show = position === i
                })
                this.loadPageData(position)
            },
            loadPageData(index) {
                if (this.pages[index].add) {
                    this.$refs[this.pages[index].ref][0].loadData()
                } else {
                    this.pages[index].add = true
                    this.$nextTick(() => {
                        this.$refs[this.pages[index].ref][0].loadData()
                    })
                }
            },
        },

        mounted() {
            this.loadPageData(this.curIndex)
        },
    }
</script>
